
<script setup>
import {ref, reactive, onMounted} from 'vue';
import { ElMessage } from 'element-plus';
import {GetApp, UpdateApp} from "@/api/app.js";
import {userInfoStore} from "@/store/userInfoStore.js";
import {AppReviewStatus} from "@/Constant/App/appReviewStatus.js";
import {AppScoringStrategy} from "@/Constant/App/appScoringStrategy.js";
import {AppType} from "@/Constant/App/appType.js";

const emit = defineEmits(['call-parent']); // 声明子组件可以触发的事件

const notifyParent = () => {
  emit('call-parent'); // 触发名为 'call-parent' 的自定义事件
};

const dialogVisible = ref(false);
const AppFormRef = ref(null);

const AppForm = reactive({
  id: null,
  appName: '',
  appDesc: '',
  appType: '',
  appIcon: '',
  scoringStrategy: '',
  reviewStatus: '',
  reviewMessage: '',
  reviewerId: userInfoStore().info.id,
});

const rules = {
  appName: [
    { required: true, message: '请输入App名称', trigger: 'blur',},
    {
      min: 2,
      max: 20,
      message: '长度在 2 到 20 个字符',
      trigger: 'blur'
    }
  ],
  appDesc: [
    { required: true, message: '请输入app的描述', trigger: 'change' }
  ],
  appType: [
    { required: true, message: '请选择app的类型', trigger: 'change' }
  ],
  scoringStrategy:[
    {required: true, message: '请选择评分策略', trigger: 'change'}
  ],
  reviewStatus:[
    {required: true, message: '请选择审核状态', trigger: 'change'}
    ],
};

const handleAvatarChange = (file) => {
  userForm.user_pic = file.raw;
};

const UpdaterequestParam = ()=>{
  let param = {
    id : AppForm.id,
    appName: AppForm.appName,
    appDesc: AppForm.appDesc,
    appType: AppForm.appType,
    appIcon: AppForm.appIcon===''?null:AppForm.appIcon,
    scoringStrategy: AppForm.scoringStrategy,
    reviewStatus: AppForm.reviewStatus,
    reviewMessage: AppForm.reviewMessage,
  }
  return param;
}
const getApp = async(row)=>{
  console.log("row.id: ",row.id);
  const data = await GetApp(row.id);
  console.log("Appdata: ",data);
  AppForm.appName = data.data.appName;
  AppForm.appDesc = data.data.appDesc;
  AppForm.appType = data.data.appType;
  AppForm.appIcon = data.data.appIcon;
  AppForm.scoringStrategy = data.data.scoringStrategy;
  AppForm.reviewStatus = data.data.reviewStatus;
  AppForm.reviewMessage = data.data.reviewMessage;
}

const submitForm = async () => {
  if (!AppFormRef.value) return;
  await AppFormRef.value.validate(async (valid) => {
    if (valid) {
      // 这里可以添加提交表单的逻辑
      console.log('提交的表单数据:', AppForm);
      await UpdateApp(UpdaterequestParam(AppForm))
          .then(() => {
            // 提交成功后的逻辑
            ElMessage.success('提交成功');
            // 重置表单
            AppFormRef.value.resetFields();
            dialogVisible.value = false;
            // 提醒父组件重新获取表格数据
            notifyParent();
          })
          .catch((error) => {
            console.error('提交失败:', error);
            ElMessage.error('提交失败，请重试。');
            dialogVisible.value = false;
          });
    } else {
      ElMessage.error('表单验证失败，请检查必填项。');
    }
  });
};
// 暴露一个方法用于显示对话框
const showUpdateAppDialog = async (row) => {
  AppForm.id = row.id;
  await getApp(row)
  dialogVisible.value = true;
};

defineExpose({
  showUpdateAppDialog
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="修改应用">
    <el-form :model="AppForm" :rules="rules" ref="AppFormRef" label-width="120px">
      <el-form-item label="名称" prop="appName">
        <el-input v-model="AppForm.appName" placeholder="请输入app的名称"/>
      </el-form-item>
      <el-form-item label="描述" prop="appDesc">
        <el-input v-model="AppForm.appDesc" placeholder="请输入app的描述"/>
      </el-form-item>
      <el-form-item label="图片">
        <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleAvatarChange"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="应用种类" prop="appType">
        <el-select v-model="AppForm.appType" placeholder="请选择app种类">
          <el-option v-for="(value,label) in AppType" :key="value" :label="label" :value="value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="评分标准" prop="scoringStrategy">
        <el-select v-model="AppForm.scoringStrategy" placeholder="请选择app评分标准">
          <el-option v-for="(value,label) in AppScoringStrategy" :key="value" :label="label" :value=value />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="reviewStatus">
        <el-select v-model="AppForm.reviewStatus" placeholder="请选择app的审核状态">
          <el-option
              v-for="(value, label) in AppReviewStatus"
              :key="value"
              :label="label"
              :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核信息" prop="reviewMessage" >
        <el-input v-model="AppForm.reviewMessage" placeholder="暂无审核信息"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm" >确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<style scoped>
/* 可以添加自定义样式 */
</style>